<script setup lang="ts">
import Carousel from '@/components/Carousel/Carousel.vue';
</script>

<template>
    <div class="list-container">
        <section class="carousel-section">
            <Carousel />
        </section>
        <section>
            <div class="letters">
                <header>
                    <h5>尚品汇快报</h5>
                    <span>更多 ></span>
                </header>
                <ul>
                    <li><span>[特惠]</span> <span>备战开学季 全民半价购数码</span></li>
                    <li><span>[特惠]</span> <span>备战开学季 全民半价购数码</span></li>
                    <li><span>[特惠]</span> <span>备战开学季 全民半价购数码</span></li>
                    <li><span>[特惠]</span> <span>备战开学季 全民半价购数码</span></li>
                    <li><span>[特惠]</span> <span>备战开学季 全民半价购数码</span></li>
                </ul>
            </div>
            <ul class="menu-icons">
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
                <li>
                    <img src="" alt="">
                    <span>话费</span>
                </li>
            </ul>
            <div class="ads">
                <img src="./images/ad1.png" alt="">
            </div>
        </section>
    </div>



</template>

<style scoped lang="less">
@import "@/styles/mixins.less";
@import "@/styles/common.less";
@import "@/styles/extends.less";
.list-container{
    margin-top: 10px;
    padding: 0 50px;
    .carousel-section{
        width: 740px;
        padding-left: 210px;
        height: inherit;
    }
    .flex-row-between();
    .letters{
        padding: 5px;
        margin-left: 10px;
        .border-1px(@border-gray-board);
        header{
            padding: 10px 15px;
            margin-bottom: 10px;
            .flex-row-between(true);
            .border-1px-switch(bottom,@border-gray-board);
            h5{
                font-weight: bold;
                font-size: @middle-max-font-size;
            }
            span{
                font-size: @min-font-size;
            }
        }
        ul{
            li{
                padding:  5px 15px;
                font-size: @min-font-size;
                span:nth-child(1){
                font-weight: bold;
            }
            }
        }
    }
    .menu-icons{
        margin-left: 10px;
        display: grid;
        grid-template-columns:repeat(4,auto);
        .border-1px-switch(left,@border-gray-board);
        .border-1px-switch(right,@border-gray-board);
        .border-1px-switch(bottom,@border-gray-board);
        // 项目边框的设置
        li{
            .horizontal-vertical-center(false);
            font-size: @min-font-size;
            cursor: pointer;
            height: 64px;
            &:not(:nth-child(4n)){
                .border-1px-switch(right,@border-gray-board);
            }
            &:not(:nth-child(9)):not(:nth-child(10)):not(:nth-child(11)):not(:nth-child(12)){
                .border-1px-switch(bottom,@border-gray-board);
            }
            img{
                width: 20px;
                height: 20px;
            }
        }

    }
    .ads{
        margin-left: 10px;
    }
}
</style>